<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>道教符咒学习系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f0e1;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: url('https://i.imgur.com/8XbVPXN.jpg') center/cover;
            color: #fff;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
            border-radius: 8px;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            font-style: italic;
        }
        
        .main-content {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .left-panel {
            flex: 1;
            min-width: 300px;
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .right-panel {
            flex: 2;
            min-width: 500px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .drawing-area {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .instructions {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .fu-list {
            list-style: none;
            margin-top: 15px;
        }
        
        .fu-item {
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f5eb;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .fu-item:hover {
            background-color: #e8e0cc;
            transform: translateY(-2px);
        }
        
        .fu-item.active {
            background-color: #d4c9a8;
            border-left: 4px solid #8b7d5b;
        }
        
        .canvas-container {
            position: relative;
            margin-top: 15px;
        }
        
        canvas {
            border: 2px solid #8b7d5b;
            border-radius: 5px;
            background-color: #f9f5eb;
            cursor: crosshair;
        }
        
        .canvas-overlay {
            position: absolute;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0.4;
        }
        
        .tools {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        button {
            padding: 8px 15px;
            background-color: #8b7d5b;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        button:hover {
            background-color: #6a5d43;
        }
        
        .ink-color {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .step-container {
            margin-top: 15px;
        }
        
        .step {
            display: none;
            animation: fadeIn 0.5s;
        }
        
        .step.active {
            display: block;
        }
        
        .step-navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }
        
        .progress-bar {
            height: 10px;
            background-color: #e0e0e0;
            border-radius: 5px;
            margin: 20px 0;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background-color: #8b7d5b;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .fu-image {
            max-width: 100%;
            margin: 15px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        .chant-container {
            margin-top: 15px;
            padding: 15px;
            background-color: #f0e9d8;
            border-radius: 5px;
            border-left: 4px solid #8b7d5b;
        }
        
        .chant-text {
            font-style: italic;
            font-weight: bold;
            color: #5a4d33;
        }
        
        .category-title {
            margin-top: 20px;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 2px solid #8b7d5b;
            color: #5a4d33;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>道教符咒学习系统</h1>
            <p class="subtitle">探索古老的符咒艺术，学习传统道教法术</p>
        </header>
        
        <div class="main-content">
            <div class="left-panel">
                <h2>符咒分类</h2>
                
                <h3 class="category-title">按功能分类</h3>
                <ul class="fu-list" id="function-list">
                    <li class="fu-item" data-category="exorcism">驱邪除魔类符咒</li>
                    <li class="fu-item" data-category="thunder">雷法符咒</li>
                    <li class="fu-item" data-category="blessing">祈福纳祥类符咒</li>
                    <li class="fu-item" data-category="healing">治病救人类符咒</li>
                    <li class="fu-item" data-category="summoning">召神通灵类符咒</li>
                </ul>
                
                <h3 class="category-title">符咒详情</h3>
                <ul class="fu-list" id="fu-list">
                    <!-- 符咒列表将通过JavaScript动态生成 -->
                </ul>
            </div>
            
            <div class="right-panel">
                <div class="drawing-area">
                    <h2>符咒绘制区</h2>
                    <p id="current-fu-name">请从左侧选择一个符咒开始学习</p>
                    
                    <div class="canvas-container">
                        <canvas id="drawing-canvas" width="500" height="500"></canvas>
                        <canvas id="guide-canvas" class="canvas-overlay" width="500" height="500"></canvas>
                    </div>
                    
                    <div class="tools">
                        <button id="clear-btn">清除画布</button>
                        <button id="next-step-btn" disabled>下一步</button>
                        <button id="prev-step-btn" disabled>上一步</button>
                        <div class="ink-color" style="background-color: #000000;" data-color="#000000"></div>
                        <div class="ink-color" style="background-color: #ff0000;" data-color="#ff0000"></div>
                        <div class="ink-color" style="background-color: #0000ff;" data-color="#0000ff"></div>
                    </div>
                    
                    <div class="progress-bar">
                        <div class="progress" id="progress-bar"></div>
                    </div>
                </div>
                
                <div class="instructions">
                    <h2>符咒指导</h2>
                    <div id="fu-description">
                        <p>选择左侧的符咒类别和具体符咒，开始学习绘制和使用方法。</p>
                    </div>
                    
                    <div class="step-container" id="step-container">
                        <!-- 步骤将通过JavaScript动态生成 -->
                    </div>
                    
                    <div class="chant-container" id="chant-container" style="display: none;">
                        <h3>咒语</h3>
                        <p class="chant-text" id="chant-text"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取DOM元素
        const canvas = document.getElementById('drawing-canvas');
        const guideCanvas = document.getElementById('guide-canvas');
        const ctx = canvas.getContext('2d');
        const guideCtx = guideCanvas.getContext('2d');
        const clearButton = document.getElementById('clear-btn');
        const nextStepButton = document.getElementById('next-step-btn');
        const prevStepButton = document.getElementById('prev-step-btn');
        const inkColors = document.querySelectorAll('.ink-color');
        const progressBar = document.getElementById('progress-bar');
        const functionList = document.getElementById('function-list');
        const fuList = document.getElementById('fu-list');
        const fuDescription = document.getElementById('fu-description');
        const currentFuName = document.getElementById('current-fu-name');
        const stepContainer = document.getElementById('step-container');
        const chantContainer = document.getElementById('chant-container');
        const chantText = document.getElementById('chant-text');
        
        // 绘图变量
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;
        let currentColor = '#000000';
        let currentFu = null;
        let currentStep = 0;
        let totalSteps = 0;
        
        // 符咒数据库
        const fuDatabase = {
            exorcism: [
                {
                    id: 'zhanxie',
                    name: '斩邪断瘟印',
                    description: '此符用于切断瘟疫邪祟，保护佩戴者免受疾病侵扰。',
                    imageUrl: 'https://i.imgur.com/JdPnEtS.png',
                    steps: [
                        '首先画符头，代表三清道祖的权威。画三道弧线，从中间开始，然后左边，最后右边。',
                        '画符身主体，从上到下画一条直线，代表天地相连。',
                        '在中轴线两侧画对称的弧线，象征驱邪之力。',
                        '画符脚，以三道短横线结束，封闭符咒能量。',
                        '最后在符咒四周点上五个点，代表五行之力加持。'
                    ],
                    chant: '太上老君，急急如律令。斩妖除魔，护我身形。邪祟退散，瘟疫消停。'
                },
                {
                    id: 'beiji',
                    name: '北极驱邪院印',
                    description: '北极驱邪院印是道教重要的驱邪符咒，用于治病驱邪，保护平安。',
                    imageUrl: 'https://i.imgur.com/K8fLmNP.png',
                    steps: [
                        '画符头，代表北极星的力量，以一个五角星形状开始。',
                        '从符头向下延伸，画出代表北斗七星的七个点。',
                        '连接七个点，形成北斗七星的形状。',
                        '在星形下方画出"驱邪"二字的符文变形。',
                        '最后以三道平行线封底，完成符咒。'
                    ],
                    chant: '北极驱邪，天罡护佑。邪祟退散，疾病消除。太上敕令，急急如律令！'
                }
            ],
            thunder: [
                {
                    id: 'daleihuo',
                    name: '都天大雷火印',
                    description: '此符能召唤雷神之力，用于驱邪斩妖，诛鬼灭精，也可用于祈雨、祈晴。',
                    imageUrl: 'https://i.imgur.com/L9mQnZS.png',
                    steps: [
                        '画符头，代表天雷之力，以闪电形状开始。',
                        '从符头向下延伸，画出代表雷公电母的符文。',
                        '在中间部分画出火焰形状，象征雷火之力。',
                        '左右两侧画出雷部将军的符号。',
                        '最后以波浪线封底，象征雷声滚滚。'
                    ],
                    chant: '都天大雷，火速降临。驱邪斩妖，护佑苍生。雷公电母，听吾号令。急急如律令！'
                }
            ],
            blessing: [
                {
                    id: 'wufang',
                    name: '五方贵人符',
                    description: '此符能吸引五方贵人相助，带来好运和贵人相助。',
                    imageUrl: 'https://i.imgur.com/NmP7qSt.png',
                    steps: [
                        '画符头，代表天地之力，以一个圆形开始。',
                        '在圆形内部画出五角星，代表五方。',
                        '从五角星的每个角向外延伸五条线，代表五方贵人。',
                        '在每条线的末端画上小圆点，象征贵人之力。',
                        '最后在符咒周围画上保护圈，封闭能量。'
                    ],
                    chant: '五方贵人，急急来相助。东南西北中，贵人齐护佑。吉星高照，福禄双全。'
                }
            ],
            healing: [
                {
                    id: 'beidihuo',
                    name: '北帝火铃印',
                    description: '此符用于治病，能驱除体内邪气，恢复健康。',
                    imageUrl: 'https://i.imgur.com/R7fQmLs.png',
                    steps: [
                        '画符头，代表北帝之力，以三道平行线开始。',
                        '从符头向下画出火焰形状，象征火铃之力。',
                        '在火焰两侧画出铃铛形状，象征驱邪之声。',
                        '中间部分画出治病符文，针对特定疾病。',
                        '最后以圆形封底，象征病气被封锁。'
                    ],
                    chant: '北帝火铃，驱邪除病。火焰净化，铃声远扬。病气消散，健康吉祥。急急如律令！'
                }
            ],
            summoning: [
                {
                    id: 'zhaoji',
                    name: '召集群仙印',
                    description: '此符能召集诸仙至坛前，用于重要法事和籍表。',
                    imageUrl: 'https://i.imgur.com/Wq3nLmS.png',
                    steps: [
                        '画符头，代表天门开启，以拱门形状开始。',
                        '从符头向下画出云朵形状，象征仙境。',
                        '在云朵中间画出"召"字的符文变形。',
                        '四周画出星辰符号，代表群仙所在。',
                        '最后以三道波浪线封底，象征仙气缭绕。'
                    ],
                    chant: '天门开启，地户洞开。群仙听令，速来坛前。太上敕令，不得违延。急急如律令！'
                }
            ]
        };
        
        // 初始化画布
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.lineWidth = 3;
        ctx.strokeStyle = currentColor;
        
        guideCtx.lineJoin = 'round';
        guideCtx.lineCap = 'round';
        guideCtx.lineWidth = 3;
        guideCtx.strokeStyle = '#aaaaaa';
        
        // 绘图事件监听
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);
        
        // 触摸事件支持
        canvas.addEventListener('touchstart', startDrawingTouch);
        canvas.addEventListener('touchmove', drawTouch);
        canvas.addEventListener('touchend', stopDrawing);
        
        // 清除画布
        clearButton.addEventListener('click', clearCanvas);
        
        // 更改墨色
        inkColors.forEach(color => {
            color.addEventListener('click', changeColor);
        });
        
        // 步骤导航
        nextStepButton.addEventListener('click', nextStep);
        prevStepButton.addEventListener('click', prevStep);
        
        // 符咒类别选择
        functionList.addEventListener('click', function(e) {
            if (e.target.classList.contains('fu-item')) {
                // 移除所有选中状态
                document.querySelectorAll('.fu-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 设置当前选中状态
                e.target.classList.add('active');
                
                // 更新符咒列表
                const category = e.target.getAttribute('data-category');
                updateFuList(category);
            }
        });
        
        // 符咒选择
        fuList.addEventListener('click', function(e) {
            if (e.target.classList.contains('fu-item')) {
                // 移除所有选中状态
                document.querySelectorAll('.fu-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 设置当前选中状态
                e.target.classList.add('active');
                
                // 加载符咒
                const fuId = e.target.getAttribute('data-fu');
                const category = e.target.getAttribute('data-category');
                loadFu(category, fuId);
            }
        });
        
        // 函数：开始绘图
        function startDrawing(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }
        
        // 函数：触摸开始绘图
        function startDrawingTouch(e) {
            e.preventDefault();
            isDrawing = true;
            const rect = canvas.getBoundingClientRect();
            const touch = e.touches[0];
            [lastX, lastY] = [touch.clientX - rect.left, touch.clientY - rect.top];
        }
        
        // 函数：绘图
        function draw(e) {
            if (!isDrawing) return;
            
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
            
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }
        
        // 函数：触摸绘图
        function drawTouch(e) {
            if (!isDrawing) return;
            e.preventDefault();
            
            const rect = canvas.getBoundingClientRect();
            const touch = e.touches[0];
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            
            ctx.beginPath();
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.stroke();
            
            [lastX, lastY] = [x, y];
        }
        
        // 函数：停止绘图
        function stopDrawing() {
            isDrawing = false;
        }
        
        // 函数：清除画布
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
        
        // 函数：更改墨色
        function changeColor() {
            // 移除所有选中状态
            inkColors.forEach(c => c.style.border = 'none');
            // 设置当前选中状态
            this.style.border = '2px solid #ff6b6b';
            currentColor = this.getAttribute('data-color');
            ctx.strokeStyle = currentColor;
        }
        
        // 函数：更新符咒列表
        function updateFuList(category) {
            fuList.innerHTML = '';
            
            if (fuDatabase[category]) {
                fuDatabase[category].forEach(fu => {
                    const li = document.createElement('li');
                    li.className = 'fu-item';
                    li.setAttribute('data-fu', fu.id);
                    li.setAttribute('data-category', category);
                    li.textContent = fu.name;
                    fuList.appendChild(li);
                });
            }
        }
        
        // 函数：加载符咒
        function loadFu(category, fuId) {
            // 查找符咒
            const fuArray = fuDatabase[category];
            currentFu = fuArray.find(fu => fu.id === fuId);
            
            if (currentFu) {
                // 更新符咒名称
                currentFuName.textContent = currentFu.name;
                
                // 更新符咒描述
                fuDescription.innerHTML = `
                    <p>${currentFu.description}</p>
                    <img src="${currentFu.imageUrl}" alt="${currentFu.name}" class="fu-image">
                `;
                
                // 更新步骤
                updateSteps();
                
                // 更新咒语
                if (currentFu.chant) {
                    chantContainer.style.display = 'block';
                    chantText.textContent = currentFu.chant;
                } else {
                    chantContainer.style.display = 'none';
                }
                
                // 清除画布并绘制指导
                clearCanvas();
                clearGuideCanvas();
                
                // 重置步骤
                currentStep = 0;
                totalSteps = currentFu.steps.length;
                updateStepButtons();
                updateProgressBar();
            }
        }
        
        // 函数：更新步骤
        function updateSteps() {
            stepContainer.innerHTML = '';
            
            if (currentFu && currentFu.steps) {
                currentFu.steps.forEach((step, index) => {
                    const stepDiv = document.createElement('div');
                    stepDiv.className = `step ${index === 0 ? 'active' : ''}`;
                    stepDiv.id = `step-${index}`;
                    stepDiv.innerHTML = `
                        <h3>步骤 ${index + 1}/${currentFu.steps.length}</h3>
                        <p>${step}</p>
                    `;
                    stepContainer.appendChild(stepDiv);
                });
                
                // 启用步骤按钮
                nextStepButton.disabled = false;
                prevStepButton.disabled = true;
            }
        }
        
        // 函数：下一步
        function nextStep() {
            if (currentFu && currentStep < totalSteps - 1) {
                // 隐藏当前步骤
                document.getElementById(`step-${currentStep}`).classList.remove('active');
                
                // 显示下一步骤
                currentStep++;
                document.getElementById(`step-${currentStep}`).classList.add('active');
                
                // 更新按钮状态
                updateStepButtons();
                
                // 更新进度条
                updateProgressBar();
            }
        }
        
        // 函数：上一步
        function prevStep() {
            if (currentFu && currentStep > 0) {
                // 隐藏当前步骤
                document.getElementById(`step-${currentStep}`).classList.remove('active');
                
                // 显示上一步骤
                currentStep--;
                document.getElementById(`step-${currentStep}`).classList.add('active');
                
                // 更新按钮状态
                updateStepButtons();
                
                // 更新进度条
                updateProgressBar();
            }
        }
        
        // 函数：更新步骤按钮
        function updateStepButtons() {
            prevStepButton.disabled = currentStep === 0;
            nextStepButton.disabled = currentStep === totalSteps - 1;
        }
        
        // 函数：更新进度条
        function updateProgressBar() {
            if (totalSteps > 0) {
                const progress = ((currentStep + 1) / totalSteps) * 100;
                progressBar.style.width = `${progress}%`;
            } else {
                progressBar.style.width = '0%';
            }
        }
        
        // 函数：清除指导画布
        function clearGuideCanvas() {
            guideCtx.clearRect(0, 0, guideCanvas.width, guideCanvas.height);
        }
        
        // 初始化第一个类别
        if (functionList.children.length > 0) {
            functionList.children[0].click();
        }
    });
</script>
</body>
</html>
